<template>
  <x-fixed v-if="isShow" :interval="10" direction="bottom" background="transparent" fixed>
    <view class="p-subscription-fixed" @click="handleSubscribe">
      <view class="icon">
        <x-icon name="icon-073" size="40" color="#28C445" />
      </view>
      <view class="dt">有优惠提醒我</view>
      <view class="button">开启</view>
      <view class="closure" @click.stop="isShow = false">
        <x-icon name="icon-025" color="#28C445" />
      </view>
    </view>
  </x-fixed>
</template>

<script>
import { mapState } from 'vuex';
import config from '@/config';
import XFixed from '@/components/x-fixed';
import XIcon from '@/components/x-icon';

export default {
  name: 'PSubscriptionFixed',
  components: {
    XFixed,
    XIcon
  },
  props: {},
  data() {
    return {
      isShow: false
    };
  },
  computed: {
    ...mapState({
      // 是否显示我的界面中订阅消息浮层
      showMySubscription: state => state['app'].showMySubscription
    })
  },
  watch: {},
  created() {
    // 非和气甄选小程序，加载我的界面订阅消息操作按钮
    if (['wx29879315124888ad', 'wx52d58db64d84208e', 'wxe415541fa755e353', 'wx09fae71b8f9b5d9c'].includes(config.appId)) {
      this.getTemplateList();
    }
  },
  methods: {
    getTemplateList() {
      this.$store.dispatch('message/getTemplateList', {
        storeId: 0
      }).then((res) => {
        const data = res.data;
        const availableList = data ? data.map(item => item.templateId) : [];
        if (availableList.length) {
          this.$store.dispatch('message/isAlways', availableList).then((state) => {
            this.isShow = this.showMySubscription && !state;
          });
        }
      });
    },
    // 订阅
    handleSubscribe() {
      this.$store.dispatch('message/requestSubscribeMessage', { storeId: 0 }).then(() => {
        this.isShow = false;
      });
    }
  }
};
</script>

<style lang="scss">
.p-subscription-fixed{
  background-color: #FFF; border: 2px solid #28C445; padding: 20px 0 20px 20px; border-radius: 10px; display: flex; align-items: center; width: 660px; margin: 0 auto;
  .dt{ flex: 1; padding: 0 10px; color: #28C445; line-height: 1;}
  .button{ border: 2px solid #28C445; color: #28C445; font-size: 30px; border-radius: 10px; padding: 8px 20px;}
  .closure{ padding: 0 20px;}
}
</style>
